<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="#" />


<link type="text/css" rel="styleSheet" href="../css1/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商家入驻</title>
<style>
* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

@font-face {
	font-family: 'neo';
}

input:focus {
	outline: none;
}

.form input {
	width: 300px;
	height: 30px;
	font-size: 18px;
	background: none;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
	margin-bottom: 20px;
}

.form input::placeholder {
	color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
	font-family: "neo";
}

.confirm {
	height: 0;
	overflow: hidden;
	transition: .25s;
}

.btn {
	width: 140px;
	height: 40px;
	border: 1px solid #fff;
	background: none;
	font-size: 20px;
	color: #fff;
	cursor: pointer;
	margin-top: 25px;
	font-family: "neo";
	transition: .25s;
}

.btn:hover {
	background: rgba(255, 255, 255, .25);
}

#login_wrap {
	width: 980px;
	min-height: 800px;
	border-radius: 10px;
	font-family: "neo";
	overflow: hidden;
	box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
	position: fixed;
	top: 50%;
	right: 50%;
	margin-top: -350px;
	margin-right: -490px;
}

#login {
	width: 50%;
	height: 100%;
	min-height: 800px;
	background: linear-gradient(45deg, #9a444e, #e06267);
	position: relative;
	float: right;
}

#login #status {
	width: 90px;
	height: 35px;
	margin: 40px auto;
	color: #fff;
	font-size: 30px;
	font-weight: 600;
	position: relative;
	overflow: hidden;
}

#login #status i {
	font-style: normal;
	position: absolute;
	transition: .5s
}

#login span {
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	top: 52%;
	margin-top: -140px;
}

#login span a {
	text-decoration: none;
	color: #fff;
	display: block;
	margin-top: 80px;
	font-size: 18px;
}

#bg {
	background: linear-gradient(45deg, #211136, #bf5853);
	height: 100%;
}
/*绘图*/
#login_img {
	width: 50%;
	min-height: 500px;
	background: linear-gradient(45deg, #221334, #6c3049);
	float: left;
	position: relative;
}

#login_img span {
	position: absolute;
	display: block;
}

#login_img .circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: linear-gradient(45deg, #df5555, #ef907a);
	top: 70px;
	left: 50%;
	margin-left: -100px;
	overflow: hidden;
}

#login_img .circle span {
	width: 150px;
	height: 40px;
	border-radius: 50px;
	position: absolute;
}

#login_img .circle span:nth-child(1) {
	top: 30px;
	left: -38px;
	background: #c55c59;
}

#login_img .circle span:nth-child(2) {
	bottom: 20px;
	right: -35px;
	background: #934555;
}

#login_img .star span {
	background: radial-gradient(#fff 10%, #fff 20%, rgba(72, 34, 64, 0));
	border-radius: 50%;
	box-shadow: 0 0 7px #fff;
}

#login_img .star span:nth-child(1) {
	width: 15px;
	height: 15px;
	top: 50px;
	left: 30px;
}

#login_img .star span:nth-child(2) {
	width: 10px;
	height: 10px;
	left: 360px;
	top: 80px;
}

#login_img .star span:nth-child(3) {
	width: 5px;
	height: 5px;
	top: 400px;
	left: 80px;
}

#login_img .star span:nth-child(4) {
	width: 8px;
	height: 8px;
	top: 240px;
	left: 60px;
}

#login_img .star span:nth-child(5) {
	width: 4px;
	height: 4px;
	top: 20px;
	left: 200px;
}

#login_img .star span:nth-child(6) {
	width: 4px;
	height: 4px;
	top: 460px;
	left: 410px;
}

#login_img .star span:nth-child(7) {
	width: 6px;
	height: 6px;
	top: 250px;
	left: 350px;
}

#login_img .fly_star span {
	width: 90px;
	height: 3px;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67),
		rgba(255, 255, 255, 0));
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67),
		rgba(255, 255, 255, 0));
	background: linear-gradient(to right, rgba(255, 255, 255, 0.67),
		rgba(255, 255, 255, 0));
	transform: rotate(-45deg);
}

#login_img .fly_star span:nth-child(1) {
	top: 60px;
	left: 80px;
}

#login_img .fly_star span:nth-child(2) {
	top: 210px;
	left: 332px;
	opacity: 0.6;
}

#login_img p {
	text-align: center;
	color: #af4b55;
	font-weight: 600;
	margin-top: 365px;
	font-size: 25px;
}

#login_img p i {
	font-style: normal;
	margin-right: 45px;
}

#login_img p i:nth-last-child(1) {
	margin-right: 0;
}
/*提示*/
#hint {
	width: 100%;
	line-height: 70px;
	background: linear-gradient(-90deg, #9b494d, #bf5853);
	text-align: center;
	font-size: 25px;
	color: #fff;
	box-shadow: 0 0 20px #733544;
	display: none;
	opacity: 0;
	transition: .5s;
	position: absolute;
	top: 0;
	z-index: 999;
}
/* 响应式 */
@media screen and (max-width:1000px ) {
	#login_img {
		display: none;
	}
	#login_wrap {
		width: 490px;
		margin-right: -245px;
	}
	#login {
		width: 100%;
	}
}

@media screen and (max-width:560px ) {
	#login_wrap {
		width: 330px;
		margin-right: -165px;
	}
	#login span {
		margin-left: -125px;
	}
	.form input {
		width: 250px;
	}
	.btn {
		width: 113px;
	}
}

@media screen and (max-width:345px ) {
	#login_wrap {
		width: 290px;
		margin-right: -145px;
	}
}
</style>
<script>
	if ('${msg}' == 'fl') {
		alert("账号或密码错误,请检查后重新登录!");
	}
</script>
<script src="../assets/js/jquery.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>

</head>


<body>
	<div id="bg">
		<div id="hint">
			<!-- 提示框 -->
			<p>登录失败</p>
		</div>
		<div id="login_wrap">
			<div id="login">
				<!-- 登录注册切换动画 -->
				<div
					style="margin-left: 80px; margin-top: 30px; color: white; font-size: 30px; font-family: STXingkai">

					商家入驻申请</div>
				<span>
					<form id="login_form" action="../hlogin/sign" method="post"
						style="margin-top: -170px">
						<p class="form">
							<b style="color: white;">账号:</b>&nbsp;&nbsp;<input type="text"
								name="name" id="name">
						</p>
						<p class="form">
							<b style="color: white;">密码:</b>&nbsp;&nbsp;<input
								type="password" name="password" id="pwd">
						</p>
						<p class="form">
							<b style="color: white;">店名:</b>&nbsp;&nbsp;<input type="text"
								name="dname" id="dname">
						</p>
						<p class="form">
							<b style="color: white;">配图:</b>&nbsp;&nbsp;<input type="file"
								name="file" id="dname">
						</p>
						<p class="form">
							<b style="color: white;">均价:</b>&nbsp;&nbsp;<input type="text"
								name="file" id="price">
						</p>
						<p class="form">
							<b style="color: white;">简介:</b>&nbsp;&nbsp;<input type="text"
								name="brief" id="brief">
						</p>
						<p class="form">
							<b style="color: white;">位置:</b>&nbsp;&nbsp;<input type="text"
								name="address" id="address">
						</p>

						<button type="button" value="登 录" onclick="login()" class="btn"
							style="margin-right: 20px;">注&nbsp;册</button>
					</form>
				</span>
			</div>

			<div id="login_img">
				<!-- 图片绘制框 -->
				<span class="circle"> <img src="../upload/cylogo.png">
				</span> <span class="star"> <span></span> <span></span> <span></span>
					<span></span> <span></span> <span></span> <span></span> <span></span>
				</span> <span class="fly_star"> <span></span> <span></span>
				</span>
				<p id="title">CYMR</p>
			</div>
		</div>
	</div>
</body>
<script>
	var onoff = true//根据此布尔值判断当前为注册状态还是登录状态
	var confirm = document.getElementsByClassName("confirm")[0]

	//自动居中title
	var name_c = document.getElementById("title")

	name_c.innerHTML = ""
	for (i = 0; i < name.length; i++)
		if (name[i] != ",")
			name_c.innerHTML += "<i>" + name[i] + "</i>"
			//引用hint()在最上方弹出提示
	function hint() {
		let hit = document.getElementById("hint")
		hit.style.display = "block"
		setTimeout("hit.style.opacity = 1", 0)
		setTimeout("hit.style.opacity = 0", 2000)
		setTimeout('hit.style.display = "none"', 3000)
	}
	//注册按钮
	function signin() {
		let status = document.getElementById("status")
				.getElementsByTagName("i")
		let hit = document.getElementById("hint").getElementsByTagName("p")[0]
		if (onoff) {
			confirm.style.height = 51 + "px"
			status[0].style.top = 35 + "px"
			status[1].style.top = 0
			onoff = !onoff
		} else {
			/*if (!/^[A-Za-z0-9]+$/.test(user.value))
			    hit.innerHTML = "账号只能为英文和数字"
			else if (user.value.length < 6)
			    hit.innerHTML = "账号长度必须大于6位"
			else if (passwd.value.length < 6)
			    hit.innerHTML = "密码长度必须大于6位"
			else if (passwd.value != con_pass.value)
			    hit.innerHTML = "两次密码不相等"
			else if (passwd.value = con_pass.value) {
			    submit(function(res) {
			        if (res == "exist")
			            hit.innerHTML = "该账号已存在"
			        else if (res == true) {
			            hit.innerHTML = "账号注册成功，两秒后自动刷新页面"
			            setTimeout("window.location.reload()", 2000)
			        } else if (res == false)
			            hit.innerHTML = "账号注册失败"
			    })
			}
			hint()*/
		}
	}
</script>

</html>
